<template>
	<view class="shop-detail">
		<view class="detail-img">
			<img style="width: 100%;height: 600rpx;" :src="list.img" alt="">
		</view>
		<view class="detail-content">
			<view class="con-mar">
				<view class="con-header"></view>
				<view class="con-title">
					{{list.shopName}}
				</view>
				<view class="con-shicai">
					<view class="sc-header">
						<view class="sc-header2">
							<text style="text-align: center;display: block;line-height: 10rpx;font-weight: bold;">[食材]</text>
						</view>
					</view>
					<view class="sc-content">
						<view class="sccon-item" v-for="(item,index) in list.shicai">
							<view class="item-left">
								{{item.food}}
							</view>
							<view class="item-right">
								{{item.num}}
							</view>
						</view>
					</view>
				</view>
				<view class="con-shicai">
					<view class="sc-header">
						<view class="sc-header2">
							<text style="text-align: center;display: block;line-height: 10rpx;font-weight: bold;">[汤底]</text>
						</view>
					</view>
					<view class="sc-content">
						<view class="sccon-item" v-for="(item,index) in list.tangdi">
							<view class="item-left">
								{{item.food}}
							</view>
							<view class="item-right">
								{{item.num}}
							</view>
						</view>
					</view>
				</view>
				<view class="con-shicai">
					<view class="sc-header">
						<view class="sc-header2">
							<text style="text-align: center;display: block;line-height: 10rpx;font-weight: bold;">[酱汁]</text>
						</view>
					</view>
					<view class="sc-content">
						<view class="sccon-item" v-for="(item,index) in list.jiangzhi">
							<view class="item-left">
								{{item.food}}
							</view>
							<view class="item-right">
								{{item.num}}
							</view>
						</view>
					</view>
				</view>
				<view class="con-method">
					<view class="sc-header">
						<view class="sc-header2">
							<text
								style="text-align: center;display: block;line-height: 10rpx;font-weight: bold;white-space: nowrap;text-indent: -12rpx;">[制作方法]</text>
						</view>
					</view>
					<view class="method-con">
						<view class="mcon-item" v-for="(item,index) in list.method">
							<view class="paixu">
								<text
									style="background-color: gold;display: block;width: 30rpx;height: 30rpx;border-radius: 50%;text-align: center;padding:5rpx;line-height: 30rpx;font-size: 26rpx;font-weight: bold;">{{item.paixu}}</text>
							</view>
							<view class="mcon-con">
								{{item.title}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="detail-bottom">
			<view class="bottom-ipt">
				<u--input @focus="changeShow" style="background-color: #eeeeee;" placeholder="说点什么" shape="circle"
					v-model="value" inputAlign="center"></u--input>
			</view>
			<view class="bottom-right">
				<view class="bottom-icon1">
					<u-icon size="30" @click="show=true" name="more-circle"></u-icon>
					<text style="line-height: 100rpx;">{{list.pinglun&&list.pinglun.length}}</text>
				</view>
				<view class="bottom-icon2">
					<u-icon size="30" class="aa" :color="list.state=='0'?'#666':'red'" name="star-fill" @click="shouc()"></u-icon>
					<text style="line-height: 100rpx;font-size: 28rpx;" >收藏</text>
				</view>
			</view>
		</view>
		<u-popup :show="show" :round="10" mode="bottom" @close="close">
			<view class="show-box">
				<view class="show-mar">
					<view class="show-header">
						<view class="header-left">
							全部评论
						</view>
						<view class="header-center">

						</view>
						<view class="header-right">
							<u-icon @click="show=false" name="close"></u-icon>
						</view>
					</view>
					<scroll-view :scroll-y="true" class="show-content">
						<view class="show-item" v-for="(item,index) in list.pinglun">
							<view class="show-img">
								<u-avatar :src="item.author" shape="circle"></u-avatar>
							</view>
							<view class="showcon-title">
								<view class="title-user">
									{{item.user}}
								</view>
								<view class="title-date">
									{{item.time}}
								</view>
								<view class="title-con">
									{{item.title}}
								</view>
							</view>
							<view class="show-zan">
								<u-icon size="25" @click="dianz(item)" :color="item.state=='0'?'#666':'red'" :name="item.state=='0'?'heart':'heart-fill'"></u-icon>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="detail-bottom">
					<view class="bottom-ipt" style="padding-right: 10rpx;">
						<u--input @input="addPingLun" @focus="changeShow" style="background-color: #eeeeee;" placeholder="我想说两句"
							shape="circle" v-model="value"></u--input>
					</view>
					<view class="bottom-right" v-if="value!=''">
						<u-button shape="circle" type="info" :plain="true" text="评论" @click="fasong"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getdetailDjm,
		putdetailDjm,
		getmsjusermy,
		getDjmindexshop,
		updatemsjusermy
	} from '../../../utils/api.js'
	export default {
		data() {
			return {
				list: {},
				user:{},
				value: '',
				show: false,
				shopId: null
			}
		},
		methods: {
			// 收藏 
			shouc(){
				this.list.state=this.list.state=='0'?'1':'0'
				if(this.list.state=='1'){
					getDjmindexshop(this.list.id).then(res=>{
						let data=res.data 
						let obj={
							id:data.id,
							name:data.shopName,
							username:data.user,
							author:'https://t7.baidu.com/it/u=2291349828,4144427007&fm=193&f=GIF',
							img:data.img,
							num:data.kan
						}
						this.user.shouc.unshift(obj)
						this.getmyuser({id:this.user.id,shouc:JSON.stringify(this.user.shouc)})
					})
					
				}else{
					this.user.shouc=this.user.shouc.filter(v=>v.id!=this.list.id)
					this.getmyuser({id:this.user.id,shouc:JSON.stringify(this.user.shouc)})
				}
				
			},
			getmyuser(v){
				updatemsjusermy(v).then(res=>{
					// this.render({id:this.shopId})
				})
			},
			close() {
				this.show = false
				this.value = ''
			},
			changeShow() {
				this.show = true
			},
			addPingLun() {},
			render(option) {
				let id = option.id
				// this.shopId = id
				let token=JSON.parse(uni.getStorageSync('token'))
				getmsjusermy(token.userid).then(res=>{
					let data=res.data 
					data.shouc=JSON.parse(data.shouc)
					this.user=data
					getdetailDjm(id).then(res => {
						let flag=this.user.shouc.find(v=>v.id==id)
						res.data.state=flag?'1':'0'
					res.data.jiangzhi = JSON.parse(res.data.jiangzhi)
					res.data.method = JSON.parse(res.data.method)
					res.data.pinglun = JSON.parse(res.data.pinglun)
					res.data.shicai = JSON.parse(res.data.shicai)
					res.data.tangdi = JSON.parse(res.data.tangdi)
						res.data.pinglun.map(item => {
							item.time=this.timeAgo(item.date)
							let flag=item.users.find(v=>v==token.userid)
							if(flag){
								item.state='1'
							}else{
								item.state='0'
							}
						})
					this.list = res.data
					})
				})
	
			},
			timeAgo(dateTimeStamp) {
			        let result = "";
			        let minute = 1000 * 60;      //把分，时，天，周，半个月，一个月用毫秒表示
			        let hour = minute * 60;
			        let day = hour * 24;
			        let now = new Date().getTime();   //获取当前时间毫秒
			
			        // dateTimeStamp = dateTimeStamp.substring(0, 18);
			        // //必须把日期'-'转为'/'
			        // 
					let fl=dateTimeStamp.includes('-')
					if(fl){
						dateTimeStamp = dateTimeStamp.replace(/-/g, '/');
					}
			        let timestamp = new Date(dateTimeStamp).getTime();
			        let diffValue = now - timestamp;//时间差
			        if (diffValue < 0) {
			          return result;
			        }
			        let minC = diffValue / minute;  //计算时间差的分，时，天，周，月
			        let hourC = diffValue / hour;
			        let dayC = diffValue / day;
					if (dayC >= 1 && dayC <= 2) {
			          result = " " + parseInt(dayC) + "天前"
			        } else if (hourC >= 1 && hourC <= 23) {
			          result = " " + parseInt(hourC) + "小时前"
			        } else if (minC >= 1 && minC <= 59) {
			          result = " " + parseInt(minC) + "分钟前"
			        } else if (diffValue >= 0 && diffValue <= minute) {
			          result = "刚刚"
			        } else {
			          let Nyear =new Date(dateTimeStamp).getFullYear();
			          let Nmonth = new Date(dateTimeStamp).getMonth() + 1 < 10 ? "0" + (new Date(dateTimeStamp).getMonth() + 1) : new Date(dateTimeStamp).getMonth() + 1;
			          let Ndate = new Date(dateTimeStamp).getDate() < 10 ? "0" + new Date(dateTimeStamp).getDate() : new Date(dateTimeStamp).getDate();
			
			          result = Nyear + "-" + Nmonth + "-" + Ndate
			        }
			        return result;
			      },
				  // 评论点赞 
				  dianz(v){
					  v.state=v.state=='0'?'1':'0'
					  if(v.state=='1'){
						  v.users.push(this.user.id)
					  }else{
						  v.users=v.users.filter(v=>v!=this.user.id)
					  }
					  	putdetailDjm({id:this.list.id,pinglun:JSON.stringify(this.list.pinglun)}).then(res=>{
					  		this.render({id:this.list.id})
					  	})  
				  },
			fasong() {
				this.list.pinglun.unshift({id: this.list.pinglun.length != 0 ? this.list.pinglun[0].id + 1 : 1,user: this.user.username,author:this.user.author,title: this.value,date: new Date().toLocaleString(),users:[],state:'0'
				})
				putdetailDjm({id:this.list.id,pinglun:JSON.stringify(this.list.pinglun)}).then(res=>{
					this.value=''
					this.render({id:this.list.id})
				})
			}
		},
		onLoad(option) {
			this.render(option)
		}
	}
</script>

<style>
	.shop-detail {
		width: 100%;
	}

	.detail-img {
		width: 100%;
		height: 500rpx;
		z-index: 1;
		/* overflow: hidden; */
	}

	.detail-content {
		width: 100%;
		padding: 40rpx 0;
		background-color: #fff;
		border-radius: 50rpx;
		position: relative;
		padding-bottom: 200rpx;
	}

	.con-mar {
		width: 95%;
		margin: 0 auto;
	}

	.con-header {
		width: 300rpx;
		height: 10rpx;
		background-color: black;
		border-radius: 30rpx;
		margin: 0 auto;
	}

	.con-title {
		width: 100%;
		text-align: center;
		margin-top: 50rpx;
		font-size: 50rpx;
		font-weight: bold;
		padding-bottom: 100rpx;
	}

	.sc-header {
		width: 100%;
	}

	.sc-header2 {
		width: 130rpx;
		border-bottom: 20rpx solid gold;
		margin: 0 auto;
		position: relative;
	}

	.sc-content {
		width: 100%;
	}

	.sccon-item {
		width: 100%;
		border-bottom: 1rpx solid #e7e7e7;
		margin-top: 20rpx;
		display: flex;
	}

	.item-left {
		flex: 1;
		padding: 10rpx 0;
		color: #3d3d3d;
		font-size: 28rpx;
	}

	.item-right {
		flex: 1;
		color: #3d3d3d;
		text-align: right;
		font-size: 28rpx;
	}

	.con-shicai {
		margin-bottom: 60rpx;
	}

	.con-method {
		box-shadow: 1rpx 1rpx 15rpx 1rpx rgba(185, 185, 185, 0.5);
		width: 100%;
		padding: 40rpx 0;
		background-color: #fff;
		border-radius: 50rpx;
	}

	.method-con {
		width: 90%;
		margin: 20rpx auto;
	}

	.mcon-item {
		width: 100%;
		display: flex;
		margin-bottom: 20rpx;
		letter-spacing: 2rpx;
	}

	.paixu {
		flex: 1;
	}

	.mcon-con {
		flex: 10;
		font-size: 28rpx;
	}

	.detail-bottom {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		display: flex;
	}

	.bottom-ipt {
		flex: 10;
		padding-left: 15rpx;
	}

	.bottom-right {
		flex: 5;
		background-color: #fff;
		display: flex;
		padding-left: 15rpx;
	}

	.bottom-icon1 {
		display: flex;
		margin-right: 20rpx;
	}

	.bottom-icon2 {
		display: flex;
	}

	.aa {
		color: gold;
	}

	.show-box {
		width: 100%;
		height: 700rpx;
		overflow: auto;
		padding-bottom: 150rpx;

	}

	.show-mar {
		width: 90%;
		margin: 0 auto;
	}

	.show-header {
		width: 100%;
		display: flex;
		padding: 20rpx 0;
		position: relative;
		top: 0;
	}

	.header-left {
		flex: 5;
	}

	.header-center {
		flex: 10;
	}

	.header-right {
		flex: 1;
		text-align: right;
	}

	.show-content {
		width: 100%;
		margin-top: 20rpx;
	}

	.show-item {
		display: flex;
		margin-bottom: 30rpx;
	}

	.show-img {
		flex: 1;
	}

	.showcon-title {
		flex: 10;
		display: flex;
		flex-wrap: wrap;
		margin-left: 20rpx;
	}

	.show-zan {
		flex: 1;
	}

	.title-user {
		width: 100%;
		font-size: 34rpx;
	}

	.title-date {
		width: 100%;
		font-size: 24rpx;
	}

	.title-con {
		width: 100%;
		margin-top: 20rpx;
	}
</style>